<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ include file="/public/validate.jspf"%>
<style type="text/css">
	.tds{
		text-align:right;
		height:35px;
	}
	form label{
		color:red;
		background-image:url("image/error.png");
		background-repeat:no-repeat;
		padding-left:35px;
	}
	.ok{
		background-image:url("image/right.png");
		background-repeat:no-repeat;
	}
</style>
<script type="text/javascript">
	$(function(){
		//自定义方法,完成手机号码的验证
		//"phone"自定义方法名 Method:函数体 message:错误消息
		$.validator.addMethod("phone",function(value,element,param){
			//value:被验证的值,element:当前验证的Dom对象,param:参数如果有多个数组
			return new RegExp(/^1[3568]\d{9}$/).test(value); 
		},"手机号码不正确");
		//让当前表单调用validate方法实现表单验证功能
		//203行缺省的验证参数
		$("#ff").validate({
			debug:true,		//调试模式,即时验证成功也不会跳转到目标页面
			onkeyup:true,	//丢失焦点触发验证请求
			errorElement:"label",
			success:'ok',	//成功的样式
			errorPlacement:function(error,element){ //定义错误消息存放的位置
				$(element).parent().next().html(error);
			},
			rules:{			//配置验证规则,key被验证的dom对象,value:验证的方法(json)
				sname:{
					//252行验证方法出错的错误消息
					required:true,			//验证方法不要参数配置为true
					//rangelength:[6,12]		//验证字段的长度
					remote:{
						url:'user_checkName.action',
						type:"post"
					}
				},
				spass:{
					required:true,
					rangelength:[6,12]
				},
				spass2:{
					required:true,
					equalTo:'#spass'
				},
				slike:{
					required:true
				},
				semail:{
					//required:true,
					email:true
				},
				simage:{
					required:true,
					accept:'gif|jpeg|jpg|png'
				},
				saddress:{
					required:true
				},
				sphone:{
					phone:true
				}
			},
			messages:{
				sname:{
					//252行验证方法出错的错误消息
					required:"用户名必填"	,		//验证方法不要参数配置为true
					//rangelength:[6,12]		//验证字段的长度
					remote:"用户名已经存在"
				},
				spass:{
					required:"密码必填",
					rangelength:$.format("字段的长度必须为:{0},{1}之间")
				},
				spass2:{
					required:"密码确认必填",
					equalTo:"密码必须一致"
				},
				slike:{
					required:"请选择爱好"
				},
				semail:{
					email:"邮箱不正确"
				},
				simage:{
					required:"请选择头像",
					accept:$.format("文件上传的格式必须为:{0}")
				},
				saddress:{
					required:"请选择地址"
				}
			}
		});
	});
</script>
</head>
	<jsp:include page="/include/header.jsp"></jsp:include>
	<!-- 头部结束 -->
	<!-- 导航栏 -->
	<jsp:include page="/include/navigater.jsp"></jsp:include>
	<!--导航栏结束-->
	
	<div id="dd" class="action_buttonbar" style="text-align:center;">
		<form id="ff" action="www.hao123.com" method="post">
			<table border="0" style="margin:0 auto;" width="500px;">
				<tr>
					<td class="tds">姓名:</td>
					<td><input type="text" name="sname"/></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="tds">密码:</td>
					<td><input type="text" name="spass" id="spass"/></td>
					<td>&nbsp;</td>
				</tr>
				<tr >
					<td>确认密码:</td>
					<td><input type="text" name="spass2"/></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="tds">爱好:</td>
					<td>上网:<input type="checkbox" name="slike" value="上网"/>
						睡觉:<input type="checkbox" name="slike" value="睡觉"/>
						旅游:<input type="checkbox" name="slike" value="旅游"/>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="tds">邮箱:</td>
					<td><input type="text" name="semail"/></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="tds">所在地:</td>
					<td><select name="saddress">
						<option value="">---请选择---</option>
						<option value="北京">北京</option>
						<option value="上海">上海</option>
						<option value="深圳">深圳</option>
					</select></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="tds">手机号码:</td>
					<td><input type="text" name="sphone"/></td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td class="tds">头像:</td>
					<td><input type="file" name="simage"/></td>
					<td>&nbsp;</td>
				</tr>
				<tr style="text-align:center;">
					<td colspan="3"><input type="submit" value="提交"/></td>
				</tr>
			</table>
		</form>
	</div>
	
	<!-- 导航栏结束 -->
	<jsp:include page="/include/footer.jsp"></jsp:include>
<body>
</body>
</html>
